<template>
	<view class="page-content">
		<view class="n_title">{{title}}</view>
		<view class="content-content">
			<view class="d-pannel-lg">
				<view>
					<view class="uni-row">
						<view class="uni-row1-icon"></view>
						<view class="uni-row1-title">产品运行情况</view>
					</view>
				</view>
				<view class="uni-row device_num">
					<view>
						<view class="device_num1 device_num_item">
							<view>{{deviceSum.sum}}</view>
						</view>
						<view>监管设备数</view>
					</view>
					<view>
						<view class="device_num2 device_num_item">
							<view>{{deviceSum.sensorSum}}</view>
						</view>
						<view>监管设点数</view>
					</view>
					<view>
						<view class="device_num3 device_num_item">
							<view>{{deviceSum.success}}</view>
						</view>
						<view>正常设备台数</view>
					</view>
				</view>
			</view>
			<view class="d-pannel-lg t10">
				<view class="uni-row">
					<view class="uni-row1-icon"></view>
					<view class="uni-row1-title">全厂运行状态</view>
				</view>
				<view class="uni-row deviceTxt">
					<view class="deviceTxt1">系统总运行时间</view>
					<view>{{deviceSum.hour}}小时</view>
				</view>
				<view class="uni-row deviceTxt">
					<view class="deviceTxt2">系统设备运行率</view>
					<view>{{deviceSum.runPre}}%</view>
				</view>
				<view class="uni-row deviceTxt">
					<view class="deviceTxt3">设备正常率</view>
					<view>{{deviceSum.successPre}}%</view>
				</view>
				<view class="uni-row deviceTxt">
					<view class="deviceTxt4">全厂设备健康度</view>
					<view>{{deviceSum.healthLevel}}%</view>
				</view>
			</view>
			<view class="d-pannel-lg t10">
				<view class="uni-row">
					<view class="uni-row1-icon"></view>
					<view class="uni-row1-title">产品运行情况</view>
				</view>
				<view class="char-view" >
					<echarts ref="echarts" :option="optionChat" canvasId="optionChat"></echarts>
				</view>
			</view>
			<view class="d-pannel-lg t10">
				<view class="uni-row">
					<view class="uni-row1-icon"></view>
					<view class="uni-row1-title">全厂运营分析</view>
				</view>
				<view class="uni-row tab-view t10">
					<view :class="runStatus=='1' ? 'tab tab-act' : 'tab'" @click="runStatuschange('1')">本周</view>
					<view :class="runStatus=='2' ? 'tab tab-act' : 'tab'" @click="runStatuschange('2')">本月</view>
					<view :class="runStatus=='3' ? 'tab tab-act' : 'tab'" @click="runStatuschange('3')">本年</view>
				</view>
				<view class="t10 char-view">
					<echarts ref="echarts" :option="optionChat1" canvasId="optionChat1"></echarts>
				</view>
			</view>
			<view class="d-pannel t10">
				<view class="uni-row">
					<view class="uni-row1-icon"></view>
					<view class="uni-row1-title">实时报警检测</view>
				</view>
				<view>
					<view v-for="(d,dix) in waring" class="uni-row d-i" :key="'d'+dix">
						<view>{{common.timestampToTimeMils(d.time)}}</view>
						<view>{{d.regionName}}</view>
						<view>{{d.name}}</view>
						<view>{{d.waringName}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '总览',
				deviceSum:{
					sum:0, // 监管设备数
					sensorSum:0, // 监管设点数
					success:0, // 正常设备台数
					hour:0,  //系统总运行时间
					runPre:0, // 系统设备运行率
					successPre:0, // 设备正常率
					healthLevel:0, // 全厂设备健康度
				},
				runStatus:'1',
				waring:[],
				optionChat:{},
				optionChat1:{}
			}
		},
		onShow(){
			this.getDeviceSum()
			this.deviceStatus()
			this.deviceRunStatus()
			this.getWaring()
		},
		onLoad() {
			
		},
		methods: {
			getDeviceSum(){
				let url='/api/index/device/sum'
				this.common.get(url,{},(res)=>{
					if(res.code!=1){
						this.common.showError(res.msg)
						return
					}
					this.deviceSum = res.data
				})
			},
			// 产品运行情况
			deviceStatus(){
				const url = '/api/index/device/status'
				this.common.getNotLoading(url,{},(res)=>{
					if(res.code!=1){
						this.common.showError(res.msg)
						return
					}
					let legend = ['入库','出库','使用','维护']
					this.optionChat = this.$echarts.drawCustomizedPie(legend, res.data)
				})
			},
			// 全厂运营分析
			runStatuschange(val){
				this.runStatus = val
				this.deviceRunStatus()
			},
			deviceRunStatus(){
				const url = '/api/index/device/run-status'
				this.common.getNotLoading(url,{runStatus:this.runStatus},(res)=>{
					if(res.code!=1){
						this.common.showError(res.msg)
						return
					}
					this.optionChat1 = this.$echarts.drawBar1([], res.data.xaxis,res.data.series)
				})
			},
			// 实时报警检测
			getWaring(){
				const url = '/api/index/device/waring'
				this.common.getNotLoading(url,{},(res)=>{
					if(res.code!=1){
						this.common.showError(res.msg)
						return
					}
					this.waring = res.data
				})
			}
		}
	}
</script>

<style>
	.content-content{
		padding-bottom: 10px;
	}
	.char-view {
		height: 250px;
	}
	.device_num{
		margin-top: 10px;
	}
	.device_num>view{
		width: calc((100% - 20px) / 3);
		text-align: center;
	}
	
	.device_num_item{
		aspect-ratio: 114 / 100;
		font-weight: bold;
		margin-bottom: 10px;
		width: 80%;
		background-size: contain;
		vertical-align: middle;
		margin-left: 10%;
	}
	.device_num_item>view{
		font-size: 20px;
		padding-top: calc(50% - 20px);
	}
	.device_num1{
		background-image: url('/static/device_num1.png');
	}
	.device_num2{
		background-image: url('/static/device_num2.png');
	}
	.device_num3{
		background-image: url('/static/device_num3.png');
	}
	.deviceTxt{
		height: 30px;
		line-height: 30px;
		margin-top: 10px;
	}
	.deviceTxt > view:first-child{
		width:calc(100% - 90px);
		padding-left: 10px;
	}
	.deviceTxt > view:last-child{
		width: 70px;
	}
	.deviceTxt1{
		background: linear-gradient(to right,rgba(2,161,249,1) 10%, rgba(41,241,156,1) 50%, #374462 0%)
	}
	.deviceTxt2{
		background: linear-gradient(to right,rgba(1,94,234,1) 10%, rgba(0,192,250,1) 30%, #374462 0%);
	}
	.deviceTxt3{
		background: linear-gradient(to right, #5865B9,#1C91E2 10%,#22DCFD 60%, #374462 0%);
	}
	.deviceTxt4{
		background: linear-gradient(to right, #FF544F  10%,#FAD126 65%, #374462 0%);
	}
	.d-i{
		background: linear-gradient(92deg,#ff764e, rgba(255,118,78,0));
		margin-top: 5px;
		padding-left: 5px;
	}
</style>
